<template>
  <div class="dh">
    <m-header :title="title" :show=true></m-header>
    <div class="content">
      <div v-for="item in orderdata" :key="item.id" class="cardbg">
        <Card :bordered="false">
          <p slot="title">
            <Icon type="md-contact" />
            姓名：{{item.name}}
          </p>
          <p slot="extra"> 订单状态：<Tag :color="item.status | statusFilter">{{item.status | statusdisplay}}</Tag>
          </p>
          <p>身份证号码：{{item.ID_No}}</p>
          <p> 手机号码：{{item.phonenumber}}</p>
          <p v-if="item.status !== 1 &&item.status !== 2 &&item.status === 0">成功出票，请查看邮箱中是否有电子机票。</p>
          <p v-if="item.status !== 1 &&item.status === 2 &&item.status !== 0">出票失败，钱款系统正在退回</p>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>
import MHeader from "components/header/header";
import { get_order } from "@/api/order";
export default {
  name: "shopping",
  data() {
    return {
      title: "机票订单信息",
      orderdata: []
    };
  },
  components: {
    MHeader
  },
  mounted() {
    this.getorder();
  },
  methods: {
    getorder() {
      get_order()
        .then(res => {
          console.log(res);
          this.orderdata = res.data.order;
        })
        .catch(err => {});
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "success",
        1: "primary",
        2: "error"
      };
      return statusMap[status];
    },
    statusdisplay(status) {
      const statusMap = {
        0: "出票成功",
        1: "等待出票",
        2: "出票失败"
      };
      return statusMap[status];
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';

.dh {
  width: 100%;
  height: 100%;

  .content {
    padding-top: 100px;
    padding-bottom: 100px;
    background: $color-background;

    .cardbg {
      margin: 20px;
    }
  }
}
</style>
